<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="一致性证书编号:" prop="consistencyCertificateNo">
          <el-input
            v-model="formModel.consistencyCertificateNo"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="车辆型号:" prop="clxh">
          <el-input
            v-model="formModel.clxh"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="证书类型:" prop="type">
          <el-input
            v-model="formModel.type"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="状态:" prop="status">
          <hey-select v-model="formModel.status" clcd="is_effective_cd" />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button
              v-if="hasPermission('consistencyCertificate_select')"
              type="primary"
              plain
              @click="queryList(false)"
            >查询
            </el-button>
            <el-button v-if="hasPermission('consistencyCertificate_add')" type="primary" plain @click="handleAdd">新增
            </el-button>
            <el-button type="primary" plain @click="handleExport">导出
            </el-button>
            <el-button type="primary" plain @click="handleImport">导入
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hey-table ref="table" :table-data="tableData" :columns="columns">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="120"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span
              v-if="hasPermission('consistencyCertificate_edit')"
              class="hey_tools_btn"
              @click="handleEdit(row)"
            >编辑</span>
            <span
              v-if="hasPermission('consistencyCertificate_del')"
              class="hey_tools_btn"
              @click="handleDelete(row)"
            >删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <el-dialog
      v-if="dialogVisible"
      v-dialogDrag
      :close-on-click-modal="false"
      title="供应商信息"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <ConsistencyCertificate-mnt :page-type="operateType" :edit-data="editData" @mntSuc="queryList" />
    </el-dialog>

    <!-- 导入对话框 -->
    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px">
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        action=""
        :file-list="fileList"
        :on-change="handleChange"
        :on-remove="handleRemove"
        :http-request="uploadSectionFile"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div slot="tip" class="el-upload__tip">
          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
        </div>
        <div slot="tip" class="el-upload__tip" style="color:#ff0000">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>

export default {
  name: 'ConsistencyCertificateList',
  components: {
    ConsistencyCertificateMnt: () => import('./consistencyCertificate-mnt')
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      operateType: '',
      editData: {},
      tableData: [],
      fileList: [],
      upload: {
        // 是否显示弹出层
        open: false
      },
      // 查询条件
      formModel: {
        consistencyCertificateNo: '',
        clxh: '',
        type: '',
        status: ''
      },
      columns: [
        { title: '车辆一致性证书编号', key: 'consistencyCertificateNo' },
        { title: '生产者(制造商)名称', key: 'clzzqymc' },
        { title: '车辆制造国', key: 'clzzgs' },
        { title: '车辆注册类型', key: 'cxxldh' },
        { title: '车辆形式', key: 'clxs' },
        { title: '车型名称', key: 'cxmc' },
        { title: '车辆类别', key: 'cllb' },
        { title: '车辆中文品牌', key: 'clzwpp' },
        { title: '车辆英文品牌', key: 'clywpp' },
        { title: '标牌位置', key: 'bpwz' },
        { title: '车辆生产企业名称', key: 'jbzzsmc' },
        { title: '车辆生产企业地址', key: 'jbzzsdz' },
        { title: '最终制造商名称', key: 'zzzzsmc' },
        { title: '法定铭牌的位置', key: 'fdmpwz' },
        { title: '车辆识别号', key: 'clsbh' },
        { title: '车辆识别代号打刻位置', key: 'clsbhwz' },
        { title: '车辆识别代号是否使用车型年份', key: 'clsbhsfsycxnf', clcd: 'ind_cd' },
        { title: '发动机编号', key: 'fdjbh' },
        { title: '发动机编号在发动机上的位置', key: 'fdjbhwz' },
        { title: '最终阶段车辆CCC证书编号(版本号)', key: 'ccczsh' },
        { title: 'CCC证书签发日期', key: 'qfrq' },
        { title: '发证日期', key: 'fzrq' },
        { title: '证书类型', key: 'type' },
        { title: '打印模板', key: 'model' },
        { title: '车轴数', key: 'czs' },
        { title: '车轮数', key: 'cls' },
        { title: '轮距（mm）', key: 'lj' },
        { title: '驱动轴', key: 'qdz' },
        { title: '轴距（mm）', key: 'zj' },
        { title: '长度（mm）', key: 'cd' },
        { title: '宽度（mm）', key: 'kd' },
        { title: '高度（mm）', key: 'gd' },
        { title: '前悬（mm）', key: 'qx' },
        { title: '后悬（mm）', key: 'hx' },
        { title: '接近角（°）', key: 'jjj' },
        { title: '离去角（°）', key: 'lqj' },
        { title: '运行状态车辆质量（kg）', key: 'yxztclzl' },
        { title: '最大允许总质量（kg）', key: 'jszdzzzl' },
        { title: '车轴间质量分配（kg）', key: 'czjzlfp' },
        { title: '各车轴技术最大质量（kg）', key: 'gczjszdzl' },
        { title: '车顶最大载荷（kg）', key: 'cdzdzh' },
        { title: '挂车最大质量（kg）', key: 'gczdzl' },
        { title: '整备质量（kg）', key: 'zdzhzl' },
        { title: '最大允许总质量对应的轴荷分配（kg）', key: 'gcljdzdczfh' },
        { title: '是否拖挂', key: 'sfyxtg', clcd: 'ind_cd' },
        { title: '最大允许牵引质量', key: 'zdyxqyzl' },
        { title: '发动机制造商', key: 'fdjzzs' },
        { title: '发动机型号', key: 'fdjxh' },
        { title: '发动机工作原理', key: 'fdjgzyl' },
        { title: '直接喷射', key: 'zjps' },
        { title: '气缸数量', key: 'qgsl' },
        { title: '气缸排列形式', key: 'qgplxs' },
        { title: '排量（L）', key: 'pl' },
        { title: '燃料种类', key: 'rlzl' },
        { title: '最大输出功率（kW）', key: 'zdjgl' },
        { title: '离合器形式', key: 'lhqxs' },
        { title: '变速器型式', key: 'bsqxs' },
        { title: '速比', key: 'sb' },
        { title: '主传动比', key: 'zcdb' },
        { title: '基本车辆制造国', key: 'jbclzzg' },
        { title: '轮胎规格', key: 'ltgg' },
        { title: '转向型式', key: 'fzzxfs' },
        { title: '制动装置简要说明', key: 'zdzzjysm' },
        { title: '车身型式', key: 'csxs' },
        { title: '车身颜色', key: 'csys' },
        { title: '车门数量结构', key: 'cmsljg' },
        { title: '座椅数量位置', key: 'zyslwz' },
        { title: '牵引装置标志', key: 'qyzzbz' },
        { title: '最高车速', key: 'zgcs' },
        { title: '定置噪声/加速行驶车外噪声国家标准及对应的实施阶段', key: 'sj3cbzh' },
        { title: '定置噪声[dB（A）]/发动机转速（min-1）', key: 'dzzs' },
        { title: '发动机转速（min-1）', key: 'fdjzs' },
        { title: '加速行驶车外噪声[dB（A）]', key: 'jsxscwzs' },
        { title: 'CCC认证引用的标准号及对应的实施阶段', key: 'pq3cbzh' },
        { title: '液体燃料_CO', key: 'syyt' },
        { title: '液体燃料_Nox', key: 'ytcf' },
        { title: '液体燃料_烟度(m-1)', key: 'ytyd' },
        { title: '液体燃料_HC+Nox', key: 'ytwlw' },
        { title: '液体燃料_N2O', key: 'syqt' },
        { title: '液体燃料_HC', key: 'qtcf' },
        { title: '气体燃料_微粒物', key: 'qtwlw' },
        { title: 'CO2 3C标准号', key: 'co23cbzh' },
        { title: '市区排放量', key: 'sqpfl' },
        { title: '郊区排放量', key: 'jqpfl' },
        { title: '综合排放量', key: 'zhpfl' },
        { title: '市区燃料消耗量', key: 'sqrlxhl' },
        { title: '郊区燃料消耗量', key: 'jqrlxhl' },
        { title: '综合燃料消耗量', key: 'zhrlxhl' },
        { title: '牵引装置中心与车辆最后端之间的距离(mm)', key: 'clqdyqyzzjl' },
        { title: '车辆投影面积（m2）', key: 'cltymj' },
        { title: '机动车连接点技术最大质量（kg）', key: 'jdcljdjszdzl' },
        { title: '驱动轴是否装空气悬挂', key: 'qdzsfzkqxg' },
        { title: '挂车制动系统供气管内压力（bar）', key: 'gczdxtgqgnyl' },
        { title: '站位数', key: 'zws' },
        { title: '装载区域长度', key: 'zzqycd' },
        { title: '载质量利用系数（kg）', key: 'zzllyxs' },
        { title: '钢板弹簧片数（片）', key: 'gbthps' },
        { title: '货厢内部尺寸-长度（mm）', key: 'hxnbccc' },
        { title: '货厢内部尺寸-宽度（mm）', key: 'hxnbcck' },
        { title: '货厢内部尺寸-高度（mm）', key: 'hxnbccg' },
        { title: '液体燃料_粒子数量(PN)', key: 'ytrlLzsl' },
        { title: '污染物排放实施阶段', key: 'wrwpfssjd' },
        { title: '试验用气体燃料_CO', key: 'qtrlCo' },
        { title: '试验用气体燃料_CH4', key: 'qtrlCh4' },
        { title: '试验用气体燃料_NH3', key: 'qtrlNh3' },
        { title: '试验用气体燃料_THC', key: 'qtrlThc' },
        { title: '试验用气体燃料_N2O', key: 'qtrlN2o' },
        { title: '试验用气体燃料_NMHC', key: 'qtrlNmhc' },
        { title: '试验用气体燃料_Nox', key: 'qtrlNox' },
        { title: '试验用液体燃料_颗粒物', key: 'ytrlklw' },
        { title: '新能源车', key: 'xnyc' },
        { title: '基本车辆类别', key: 'jbcllx' },
        { title: '电动机生产厂名称', key: 'ddjsccmc' },
        { title: '电动机工作电压（V）', key: 'ddjgzdy' },
        { title: '动力电池型号', key: 'dldcxh' },
        { title: '动力电池生产厂名称（单体）', key: 'dldcsccmcDt' },
        { title: '动力电池生产厂名称（模块）', key: 'dldcsccmcMk' },
        { title: '是否带防抱死系统', key: 'sfdbsxt' },
        { title: '额定载质量（kg）', key: 'edzzl' },
        { title: '车电动机型号', key: 'cddjxh' },
        { title: '动力电池额定电压（V）', key: 'dldceddy' },
        { title: '动力电池额定容量（Ah）', key: 'dldcedrl' },
        { title: '额定载客人数', key: 'edzkrs' },
        { title: '车型种类', key: 'cxzl' },
        { title: '车辆型号', key: 'clxh' },
        { title: '基本车辆类别', key: 'jbcllb' },
        { title: '基本车辆一致性证书编号', key: 'jbclyzxzsbh' },
        { title: '液体燃料_THC', key: 'ytrlThc' },
        { title: '液体燃料_NMHC', key: 'ytrlNmhc' },
        { title: '认证委托人名称', key: 'rzwtrmc' },
        { title: '委托人名称', key: 'wtrmc' },
        { title: '委托人', key: 'wtr' },
        { title: '联系电话', key: 'wtrlxdh' },
        { title: '备注', key: 'remarks' },

        { title: '状态', key: 'status', clcd: 'is_effective_cd' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime' },
        { title: '最后修改人', key: 'lastUpdateUsername' }
      ]
    }
  },
  computed: {},
  methods: {
    queryList() {
      this.$refs.table.query('/consistencyCertificate/page', this.formModel, '', false)
    },
    handleAdd() {
      this.operateType = 'add'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.operateType = 'edit'
      this.editData = row || {}
    },
    handleDelete(row) {
      this.$sure('确认删除？', _ => {
        this.post('/consistencyCertificate/delete', {
          consistencyCertificateId: row.consistencyCertificateId
        }).then(_ => {
          this.$info('删除成功', this.queryList)
        })
      })
    },
    // 导入
    handleImport() {
      this.upload.open = true
    },
    // 导出
    handleExport() {
      const url = '/consistencyCertificate/exportConsistencyCertificate'
      this.postUseBlob(url, this.formModel).then(res => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const fileName = '一致性证书维护.xls'
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    // 下载模板
    importTemplate() {
      const url = '/consistencyCertificate/importTemplateConsistencyCertificate'
      const param = {}
      this.postUseBlob(url, param).then(res => {
        const blob = new Blob([res], {
          type: 'application/vnd.ms-excel'
        })
        const fileName = '一致性证书维护导入模板.xls'
        if ('download' in document.createElement('a')) {
          const elink = document.createElement('a')
          elink.download = fileName
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          navigator.msSaveBlob(blob, fileName)
        }
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    // 校验文件数量
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message.warning('请选取一个文件!')
        return false
      }
      if (this.fileList.length > 1) {
        this.$message.warning('单次只能上传一个文件!')
        return false
      }
      this.$refs.upload.submit()
    },
    // 上传excel文件
    uploadSectionFile(param) {
      var fileObj = param.file
      const url = '/consistencyCertificate/importConsistencyCertificate'
      // FormData 对象
      var form = new FormData()
      form.append('file', fileObj)
      const tip = '文件上传成功!'
      this.post(url, form).then(res => {
        this.$info(tip, () => {
          this.$emit('mntSuc')
          this.upload.open = false
          this.fileList = []
        })
      })
    }
  }
}
</script>
